<template>
  <div>
    <ul class="tab">
      <li v-for="(item, index) in tab" @click="change(index)" :class="idx == index ? 'on' : ''">{{ item }}</li>
    </ul>
    <component :is="currenCompent"></component>
  </div>
</template>

<script>
  import cd from '../record/index'
  import gen from '../integral/index'


  export default {
    name: "Gen",
    components: {cd,gen},
    idx: 0,
    props: {},
    data() {
      return {
        idx: 0,
        tab: ['会员排行', '消费排行'],
        currenCompent: 'cd'

      };
    },
    created() {

    },

    methods: {

      change(index) {

        if (this.idx === index || index === undefined) {
          return false;
        } else {
          this.idx = index;
        }

        if (index == 0) {
          this.currenCompent = 'cd';
        }
        if (index == 1) {
          this.currenCompent = 'gen'
        }
        /* if (index == 2) {
           this.currenCompent = 'log'
         }
         if (index == 3) {
           this.currenCompent = 'pro'
         }
         if (index == 4) {
           this.currenCompent = 'commodity'
         }
         if (index == 5) {
           this.currenCompent = 'shops'
         }*/

      },


    }
  };
</script>
<style scoped rel="stylesheet/scss" lang="scss">
  .tab {
    background-color: #fff;
    padding: 10px 20px;

    li {
      display: inline-block;
      width: 105px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      color: #9C9186;
      font-size: 16px;
      cursor: pointer;

      &.on {
        background-color: #CAAB62;
        color: #fff;
        border-radius: 2px;
      }
    }
  }
</style>
